<template>
  <div class="mine relative">
    <div class="bg-blue"></div>
    <div class="title bg-fff">
      <div class="p20">
        <div class="flex border-bottom">
          <van-icon name="manager-o" size="60" />
          <p class="mt20 f16 fb ml20">请登录/注册</p>
        </div>
        <div class="flex-a f14 text-center pt20">
          <div>
            <van-icon name="friends" size="30" color="#FF8E01" />
            <div>会员资料</div>
          </div>
          <div>
            <van-icon name="checked" size="30" color="#FF8E01" />
            <div>会员认证</div>
          </div>
          <div>
            <van-icon name="bag" size="30" color="#FF8E01" />
            <div>收藏夹</div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="bg-fff h90">
        <div class="flex-a pt20">
          <div>
            <van-icon name="printer" size="30" color="#FF8E01" />
            <div>标签</div>
          </div>
          <div>
            <van-icon name="todo-list" size="30" color="#FF8E01" />
            <div>意见反馈</div>
          </div>
          <div>
            <van-icon name="setting" size="30" color="#FF8E01" />
            <div>设置</div>
          </div>
        </div>
      </div>
    </div>
    <footer-tabbar />
  </div>
</template>

<script>
import FooterTabbar from "components/FooterTabbar";
export default {
  components: {
    FooterTabbar
  }
};
</script>

<style scoped lang='scss'>
.mine {
  background: rgba(248, 247, 255, 1);
  .bg-blue {
    height: 180px;
    background: #298fdc;
  }
  .title {
    position: absolute;
    width: 350px;
    height: 180px;
    top: 60px;
    left: 12px;
    border-radius: 8px;
    border-bottom: 10px solid #ffad46;
  }
  .content {
    margin-top: 120px;
    padding: 12px;
  }
}
</style>